<template>
	<div class="table-box">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="feedback.GetFeedbackPageAPI"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
		</proTable>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import feedback from "@/api/modules/feedback";
import { ColumnProps } from "@/components/ProTable/interface";
import proTable from "@/components/ProTable/index.vue";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	sort: ""
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
// 搜索菜单结束时间一定要大于开始时间
const disablesDate = (time: any) => {
	let startTime = proTableRef.value?.searchParam.startTime;
	if (!startTime) {
		return false;
	}
	const _minTime = new Date(startTime).getTime();
	return time.getTime() < _minTime;
};
// 表格配置项
const columns: Partial<ColumnProps>[] = [
	{ prop: "userName", label: "姓名" },
	{ prop: "userTel", label: "手机号" },
	{ prop: "content", label: "内容" },
	{ prop: "commitTime", label: "提交时间" },
	{ prop: "source", label: "来源" },
	{
		prop: "startTime",
		label: "提交开始时间",
		isShow: false,
		search: { el: "date-picker", props: { type: "date", ["value-format"]: "YYYY-MM-DD" } }
	},
	{
		prop: "endTime",
		label: "提交结束时间",
		isShow: false,
		search: { el: "date-picker", props: { type: "date", ["value-format"]: "YYYY-MM-DD", disabledDate: disablesDate } }
	},
	{
		prop: "nameOrShopName",
		label: "关键字",
		isShow: false,
		search: { el: "input", props: { placeholder: "请输入用户名称" } }
	}
];
</script>
